<template>
  <div class="app-container">
    <div class="page-header">
      <h2>订单统计</h2>
    </div>

    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="日期" prop="statisticsDate">
        <el-date-picker
          v-model="queryParams.statisticsDate"
          type="date"
          placeholder="请选择统计日期"
          value-format="YYYY-MM-DD"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">清空筛选条件</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['system:order_statistics:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="orderStatisticsList" style="width: 100%">
      <el-table-column label="区县" align="center" prop="districtName" />
      <el-table-column label="维修订单" align="center" prop="repairOrders">
        <template #default="scope">
          <span>{{ scope.row.repairOrders || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="保养订单" align="center" prop="maintenanceOrders">
        <template #default="scope">
          <span>{{ scope.row.maintenanceOrders || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="洗车订单" align="center" prop="carwashOrders">
        <template #default="scope">
          <span>{{ scope.row.carwashOrders || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总计" align="center" prop="totalOrders">
        <template #default="scope">
          <span class="total-count">{{ scope.row.totalOrders || 0 }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 汇总行 -->
    <div class="summary-row" v-if="summaryData">
      <div class="summary-item">
        <span class="summary-label">合计:</span>
      </div>
      <div class="summary-item">
        <span class="summary-value">{{ summaryData.repairOrders || 0 }}</span>
      </div>
      <div class="summary-item">
        <span class="summary-value">{{ summaryData.maintenanceOrders || 0 }}</span>
      </div>
      <div class="summary-item">
        <span class="summary-value">{{ summaryData.carwashOrders || 0 }}</span>
      </div>
      <div class="summary-item">
        <span class="summary-total">{{ summaryData.totalOrders || 0 }}</span>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
      <div class="total-info">
        共{{ total }}条
      </div>
    </div>
  </div>
</template>

<script setup name="OrderStatistics">
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { listOrderStatistics, getOrderStatisticsSummary, exportOrderStatistics } from "@/api/system/orderStatistics"

const { proxy } = getCurrentInstance()

const orderStatisticsList = ref([])
const summaryData = ref(null)
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    statisticsDate: null
  }
})

const { queryParams } = toRefs(data)

/** 查询订单统计列表 */
function getList() {
  console.log('开始查询订单统计列表，参数：', queryParams.value)
  loading.value = true
  listOrderStatistics(queryParams.value).then(response => {
    console.log('查询结果：', response)
    orderStatisticsList.value = response.rows
    total.value = response.total
    loading.value = false
  }).catch(error => {
    console.error('查询失败：', error)
    loading.value = false
  })
}

/** 查询汇总数据 */
function getSummary() {
  console.log('开始查询汇总数据，参数：', queryParams.value)
  getOrderStatisticsSummary(queryParams.value).then(response => {
    console.log('汇总数据结果：', response)
    summaryData.value = response.data
  }).catch(error => {
    console.error('查询汇总数据失败：', error)
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  console.log('搜索按钮被点击，查询参数：', queryParams.value)
  queryParams.value.pageNum = 1
  getList()
  getSummary()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.statisticsDate = null
  handleQuery()
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('system/orderStatistics/export', {
    ...queryParams.value
  }, `orderStatistics_${new Date().getTime()}.xlsx`)
}

// 初始化
getList()
getSummary()
</script>

<style scoped>
.page-header {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.el-form {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-table {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.total-count {
  font-weight: bold;
  color: #409EFF;
}

.summary-row {
  display: flex;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px 0;
  margin-bottom: 20px;
  font-weight: bold;
}

.summary-item {
  flex: 1;
  text-align: center;
  border-right: 1px solid #e4e7ed;
}

.summary-item:last-child {
  border-right: none;
}

.summary-label {
  color: #606266;
  font-size: 14px;
}

.summary-value {
  color: #409EFF;
  font-size: 16px;
}

.summary-total {
  color: #f56c6c;
  font-size: 18px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.total-info {
  color: #666;
  font-size: 14px;
}
</style>
